<template>
  <a-modal title="物流发货" width="600px" :maskClosable="false" :visible="dialog" :confirm-loading="loading" @ok="handleSave" @cancel="cancelForm">
    <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <a-table ref="table" size="small" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading"
        class="j-table-force-nowrap" @change="handleTableChange">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="good_item" slot-scope="text, record">
          <div style="display:flex;text-align:left;">
            <div style="padding:5px;">
              <img style="width:40px;" :src="record.imgUrl">
            </div>
            <div style="line-height:25px;width:250px;white-space: normal;word-break: break-all;word-wrap: break-word;">
              <div>{{record.spuName}}</div>
            </div>
          </div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="55px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>

      </a-table>

      <br>
      <a-form-model-item label="收件人信息">
        <span v-if="model">{{model.addressInfoObj.name}}</span>
        <br>
        <span v-if="model">{{model.addressInfoObj.address}}</span>
        <br>
        <span v-if="model">{{model.addressInfoObj.tel}}</span>
      </a-form-model-item>

      <a-form-model-item label="物流公司" prop="logisticsCompany">
        <a-select labelInValue show-search :default-active-first-option="false" :filter-option="false" :not-found-content="null"
          @search="handleSearch" v-model="ruleForm.logisticsCompany" placeholder="请选择物流公司">
          <a-select-option v-for="item in selectDataNow" :key="item.key">{{item.label}}
          </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="物流编号" prop="logisticsNo">
        <a-input v-model="ruleForm.logisticsNo" placeholder="输入物流编号" />
      </a-form-model-item>
    </a-form-model>

  </a-modal>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/MyJeecgListMixin'
import { postAction, getAction } from '@/api/manage'
export default {
  name: 'DeliverModalCal',
  mixins: [JeecgListMixin, mixinDevice],
  data () {
    return {
      columns: [
        {
          title: '商品',
          dataIndex: 'spuName',
          scopedSlots: { customRender: 'good_item' }

        },
        {
          title: '规格',
          dataIndex: 'skuName'
        },
        {
          title: '数量',
          align: "right",
          dataIndex: 'num'
        },
        {
          title: '售后状态',
          align: "center",
          dataIndex: 'refundStatus',
          customRender: function (text) {
            return text == 1 || text == 3 ? '退款中' : text == 2 ? '已退款' : ''
          }
        },

      ],
      type: 1,
      title: '',
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: [],
      selectData: [], // 可选择上级菜单
      dialog: false,
      loading: false,
      model: {
        addressInfoObj: {}
      },
      selectDataNow: [],
      ruleForm: {
        orderNo: '',
        logisticsCompany: {
          key: '',
          label: ''
        },
        logisticsNo: ''
      },
      rules: {
        logisticsCompany: [
          { required: true, message: '物流公司', trigger: 'change' }
        ],
        logisticsNo: [
          { required: true, message: '物流编号', trigger: 'blur' }
        ]
      },
      url: {
        list: "/mallBase/omsOrderCalendarSku/list"
      },
    }
  },
  computed: {
    rowSelection () {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectionRows = selectionRows
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.refundNo != null
          },
        }),
      }
    },
  },
  created () {

  },
  methods: {
    handleSearch (value) {
      this.selectDataNow = this.selectData.filter(function (item) {
        return value ? item.label.indexOf(value) != -1 : true
      })
    },
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
    },
    onClearSelected () {
      this.selectedRowKeys = []
      this.selectionRows = []
    },

    loadSelectData () {
      const self = this
      getAction('/common/cmsLogisticsCompany/list', { pageSize: 2000 }).then(res => {
        self.selectData = res.result.records
        self.handleSearch("")
      })
    },

    edit (record) {
      const self = this
      this.loadSelectData()
      this.dialog = true
      this.ruleForm.orderNo = record.id
      this.model = Object.assign({}, record)
      this.queryParam.calendarId = this.model.id
      // this.queryParam.refundStatus = 1
      this.loadData()

    },
    handleSave () {

      const self = this
      if (!this.dataSource || this.dataSource.length == 0) {
        this.$message.warning('没有可发货商品！')
        return
      }
      if (this.dataSource.length > 0) {
        let g_state = false
        let refundedNum = 0
        for (let i = 0; i < this.dataSource.length; i++) {
          if (this.dataSource[i].refundStatus == 1 || this.dataSource[i].refundStatus == 3) {
            g_state = true
          }
          if (this.dataSource[i].refundStatus == 2) {
            refundedNum++
          }
        }
        if (refundedNum == this.dataSource.length) {
          this.$message.warning('没有可发货商品！')
          return
        }
        if (g_state) {
          this.$message.warning('有商品处于退款中不能发货！')
          return
        }
      }
      if (!this.ruleForm.logisticsCompany.key) {
        this.$message.warning('请选择物流公司！')
        return
      }

      self.$confirm({
        title: '物流发货提醒',
        content: '确定要物流发货吗？',
        onOk () {
          self.$refs.ruleForm.validate(valid => {
            if (valid) {
              self.loading = true
              const thisForm = Object.assign({}, self.ruleForm)
              postAction('/mallBase/omsOrderCalendar/sendOrder', thisForm).then(res => {
                self.$emit('ok')
                self.loading = false
                self.dialog = false
              }).catch(_ => { self.loading = false })
            } else {
              return
            }
          })
        },
        onCancel () { },
      })
    },
    cancelForm () {
      this.loading = false
      this.dialog = false
    }
  }
}
</script>

<style lang="less" scoped>
.addimgBox {
  width: 100%;
  display: flex;
  align-items: center;
  .imgBox1 {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .imgBox2 {
    flex: 1;
    .imgBox21 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      height: 24px;
      width: 100%;
      line-height: 12px;
      font-size: 12px;
    }
    .imgBox22 {
      width: 100%;
      font-size: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #999;
    }
  }
}
</style>
